<template>
  <home-header>
    <template #nav>
      <global-nav />
    </template>
  </home-header>
  <div class="content">
    <div class="wrapper">
      <div
        class="flex items-center justify-center text-2xl text-center text-white title"
      >
        <span
          class="menu agreement"
          :class="{ active: currMenu === 'agreement' }"
          @click="goto('agreement')"
          >用户协议</span
        >
        <span
          class="menu privacy"
          :class="{ active: currMenu === 'privacy' }"
          @click="goto('privacy')"
          >隐私政策</span
        >
        <span
          class="menu legal"
          :class="{ active: currMenu === 'legal' }"
          @click="goto('legal')"
          >法律声明</span
        >
        <span
          class="menu dispute"
          :class="{ active: currMenu === 'dispute' }"
          @click="goto('dispute')"
          >纠纷处理</span
        >
      </div>
      <div class="text-base main">
        <component :is="currentComponent"></component>
      </div>
    </div>
  </div>
  <home-footer></home-footer>
</template>

<script setup>
import HomeHeader from './UHeader.vue'
import HomeFooter from '@/components/HomeFooter.vue'
import GlobalNav from '@/components/GlobalNav2.vue'
// import { getAssetsFile } from '../utils/getAccessFile'
const Agreement = defineAsyncComponent(() => import('./Agreement.vue'))
const Privacy = defineAsyncComponent(() => import('./Privacy.vue'))
const Legal = defineAsyncComponent(() => import('./Legal.vue'))
const Dispute = defineAsyncComponent(() => import('./Dispute.vue'))

const router = useRouter()
const route = useRoute()

const goto = (route)=>{
  router.push(route)
}
const currMenu = computed(() => {
  return route.path.split('/')[1] || 'agreement'
})
const currentComponent = computed(() => {
  if (currMenu.value === 'agreement') {
    return Agreement
  } else if (currMenu.value === 'privacy') {
    return Privacy
  } else if (currMenu.value === 'legal') {
    return Legal
  } else if (currMenu.value === 'dispute') {
    return Dispute
  }
})
</script>

<style lang="scss" scoped>
.content {
  // height: 3176px;
  padding-bottom: 50px;
  background: url(../assets/bg.webp) center bottom;
  .title {
    padding: 90px 0 50px;
    .menu {
      margin: 0 50px;
      padding-left: 50px;
      background-repeat: no-repeat;
      background-position: left center;
      cursor: pointer;
      &.active,
      &:hover {
        color: #4db3f9;
      }
      &.agreement {
        background-image: url(../assets/icon_menu1.png);
        &.active,
        &:hover {
          background-image: url(../assets/icon_menu1_on.png);
        }
      }
      &.privacy {
        background-image: url(../assets/icon_menu2.png);
        &.active,
        &:hover {
          background-image: url(../assets/icon_menu2_on.png);
        }
      }
      &.legal {
        background-image: url(../assets/icon_menu3.png);
        &.active,
        &:hover {
          background-image: url(../assets/icon_menu3_on.png);
        }
      }
      &.dispute {
        background-image: url(../assets/icon_menu4.png);
        &.active,
        &:hover {
          background-image: url(../assets/icon_menu4_on.png);
        }
      }
    }
  }
  .main {
    // height: 2768px;
    min-height: 1500px;
    padding: 40px 60px;
    border-radius: 10px;
    background-color: #fff;
    color: #545863;
    line-height: 2;
    h1 {
      height: 72px;
      margin-left: -27px;
      padding-left: 60px;
      color: #1e445d;
      line-height: 72px;
      font-size: 42px;
      background: url(../assets/icon_flag.png) no-repeat 0 0;
    }
    p {
      line-height: 2;
    }
    h3 {
      margin-top: 30px;
      font-size: 24px;
      color: #1e445d;
    }
    ul {
      margin-left: 20px;
      li {
        list-style: disc;
      }
    }
  }
}
</style>
